<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li>
                <p>商品编号：101，名字：oppo</p>
                <p>价格：4999</p>
                <p>颜色：</p>
                <ul>
                    <li>红色</li>
                    <li>绿色</li>
                    <li>玫瑰金</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<!-- 1.引入vue框架 -->
<script src="./vue.js"></script>
<script>
    new Vue({
        el : '#app',
        data : {
            goodsList : [{
                gid : 101,
                title : '华为',
                price : 5999,
                color : ['红色','绿色','玫瑰金']
            },{
                gid : 102,
                title : 'oppo',
                price : 4999,
                color : ['绿色','粉红色','玫瑰金','黄色']
            }]
        }
    })
</script>
</html>